<template>
	<view>
		<u-navbar title="订单" placeholder autoBack></u-navbar>
		<!-- 标签栏 -->
	    <u-tabs :list="typelist" lineColor="#04BF79" :current="selectIndex" :itemStyle="{background:'#fff',width:'65px', height:'88rpx',padding: '0 20rpx'}" @change="change"></u-tabs>
		<template v-if="list.length">
			<!-- 当传值为退款售后时 -->
			<template v-if="selectIndex===6">
				<view class="p-2 bg-white mt-2" v-for="(item,index) in list" :key="item.id">
					<!-- 订单编号及订单状态 -->
					<view class="flex align-center justify-between">
						<view class="text-main font-28">订单号:{{item.order_no}}</view>
						<view class="font-28" style="color:#EB463E;">{{item|check}}</view>
					</view>
					<!-- 商品 -->
					<view class="mt-2" v-for="(goodsItem,goodsIndex) in item.goods_order" :key="goodsIndex">
						<orderItem :item="goodsItem" type="order" @click=""></orderItem>
					</view>
					
					<view class="flex align-center justify-end mt-2">
						<view class="flex justify-center align-center nodetail" v-if="item.goods_order[0].service_order.check===0 &&item.goods_order[0].service_order.express_no===''" @click="showCange(item)">回填单号</view>
						<view class="flex align-center justify-center detail ml-1"  @click.stop="$u.route('pages/user/aftersale/detail',{orderId:item.id,ordergoodsId:item.goods_order[0].id,title:item.goods_order[0].service_order.type===1?'退款详情':'退款退货详情'})">查看详情</view>	
					</view>
				</view>
			</template>
			<template v-else>
				<view class="p-2 bg-white m-2" style="border-radius: 16rpx;" v-for="(item,index) in list" :key="index" @click="detail(item)">
					<view class="flex align-center justify-between mb-2">
						<view class="text-main font-28 font-weight-bold " >订单编号:{{item.order_no}}</view>
						<view class="font-28" :class="[item.status==5||item.status==7?'completed':'underway']">{{item|orderStatus}}</view>
					</view>
					<u-line color="#eaeaea"></u-line>
					<view class="my-2" v-for="(goodsItem,goodsIndex) in item.goods_order" :key="goodsIndex">
						<orderItem :item="goodsItem" type="order" @click=""></orderItem>
					</view>
					<u-line color="#eaeaea"></u-line>
					<view class="flex align-center justify-end mt-1">
						<text class="font-24 mr-2" style="color: #a4a4a4;">共{{item.goods_order.length}}件商品</text>
						应付款:￥{{item.pay_price}}
					</view>
					<orderButton :item="item" @refresh="refresh" ></orderButton>
				</view>
			</template>
		</template>
		<template v-else>
			<u-empty mode="order" marginTop="150"></u-empty>
		</template>
		
		<u-popup :show="show" closeable @close="show=false" height="750rpx">
			<view class="bg-white p-2" style="height: 750rpx;">
				<view class="flex align-center justify-center text-main font-28 font-weight-bold">
					退货物流信息
				</view>
				<view class="font-30 text-light6" style="margin-top: 60rpx;">快递/物流公司</view>
				<view class="mt-2">
					<u-input v-model="expressCompany" placeholder="请输入快递/物流公司"></u-input>
				</view>
				<view class="font-30 text-light6 mt-4">快递/物流单号</view>
				<view class="mt-2">
					<u-input v-model="expressNo" placeholder="请输入快递/物流单号"></u-input>
				</view>
				
				<commonButton title="提交" @click="submint"></commonButton>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
import order from '../../store/order'
	export default {
		data() {
			return {
				// typelist: [{
				// 	name: '全部'
				// }, {
				// 	name: '待付款'
				// },{
				// 	name: '待发货'
				// },{
				// 	name: '待收货'
				// },{
				// 	name: '已完成'
				// },{
				// 	name:'退款售后'
				// }],
				typelist: [{
					name: '全部'
				}, {
					name: '待付款'
				},{
					name: '待发货'
				},{
					name: '待收货'
				},{
					name: '已完成'
				}],
				selectIndex: 0,
				page:1, // 页码
				limit: 10, // 页码条数
				list:[],
				isFinish: true,
				show: false,
				expressCompany:'',
				expressNo:'',
				dataInfo: {}
			}
		},
		filters:{
			orderStatus(item){
				let value = item.status
				if(value === 1){
					return '待付款'
				}else if(value === 2){
					return '待发货'
				}else if(value === 3){
					return '待收货'
				}else if(value===4){
					return '待评价'
				}else if(value===5){
					return '交易完成'
				}else if(value===6){
					return '售后'
				} else if(value===7) {
					return '已取消'
				}
			},
			check(value){
				let serviceorder = value.goods_order[0].service_order
				let goodsorder = value.goods_order[0]
				if(serviceorder.check === 0){
					return '商家确认中'
				}
				if(serviceorder.check === 1){
					if(goodsorder.refund_status===0){
						return '退款中'
					}
					if(goodsorder.refund_status===1){
						return '退款成功'
					}
				}
				if(serviceorder.check === 2){
					return '拒绝'
				}
				
			}
		},
		onLoad(e) {
			if(e.name==='全部订单'){
				this.selectIndex = 0
			} 
			
			if(e.name==='待付款'){
				this.selectIndex = 1
			} 
			
			if(e.name==='待发货'){
				this.selectIndex = 2
			}
			if(e.name==='待收货'){
				this.selectIndex = 3
			}
			if(e.name==='待评价'){
				this.selectIndex = 4
			}
			if(e.name==='退款/售后'){
				this.selectIndex = 5
			}
			
			
		},
		onShow() {
			this.getData()
		},
		// 上拉刷新
		onReachBottom() {
			if (!this.isFinish) return 
			this.page = this.page + 1
			let parmar = {
				type:this.selectIndex === 5?6:this.selectIndex,
				page:this.page,
				limit: this.limit
			}
			this.$api.myOrder(parmar).then(res=>{
				if(res.code === 1){
					this.list = [...this.list, ...res.data]
					if (res.data.length <= this.limit) {
						this.isFinish = false
					}
					
				}
			})
		},
		methods: {
			// 获取订单列表
			getData(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let parmar = {
					type:this.selectIndex === 5?6:this.selectIndex,
					page:this.page,
					limit: this.limit
				}
				this.$api.myOrder(parmar).then(res=>{
					if(res.code === 1){
						this.list = res.data
						uni.hideLoading()
					}
				})
			},
			change(e) {
				this.selectIndex =  e.index === 5 ? e.index + 1 :e.index
				this.page = 1
				this.getData()
			},
			refresh() {
				this.getData()
			},
			detail(item){
				uni.$u.route('pages/user/orderdetail',{
					orderId:item.id,
					type: 'order'
				})
			},
			navPath(path){
				uni.$u.route(`pages/${path}/${path}`)
			},
			showCange(item) {
				this.show = true
				this.$api.serverdetail({
					order_id:item.id,
					order_goods_id:item.goods_order[0].id
				}).then(res=>{
					if(res.code === 1){
						this.dataInfo = res.data
						console.log(this.dataInfo)
					}
				})
			},
			// 提交单号
			submint() {
				console.log('111')
				if (!expressNo.length && !expressCompany.length) return
				let parmar = {
					refund_id:this.dataInfo.id,
					express_company:this.expressCompany,
					express_no:this.expressNo
				}
				this.$api.expressInfo(parmar).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title: '提交成功',
							icon:'success'
						});
						
						setTimeout(()=>{
							this.show = false
							this.Detail()
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 156rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #04BF79 0%, #02BC6B 100%);
		border-radius: 202rpx 202rpx 202rpx 202rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #FFFFFF;
	}
	.nodetail{
		width: 156rpx;
		height: 56rpx;
		border-radius: 202rpx 202rpx 202rpx 202rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #565656;
		border: 1rpx solid #cbcbcb;
	}
	.underway {
		color: #eb6933;
	}
	.completed{
		color: #828282;
	}
	.clickbtn {
		width: 50%;
		height: 100rpx;
		border: 1rpx solid #f3f4f5;
		border-radius: 12rpx;
	}
</style>
